<template>
  <div class="content">
    <article>智慧选课</article>
    <div class="wapper">
      <section>
        <h4 class="animate__animated animate__fadeInLeft">更年轻、更便捷的学生选课系统</h4>
        <button @click="onOpenLoginDialog" class="loginBtn animate__animated animate__fadeInLeft">
          <span>立即登录</span>
          <el-icon><ArrowRightBold /></el-icon>
        </button>
      </section>
      <figure>
        <img src="../../assets/image/loginSite.png" />
      </figure>
    </div>
    <footer>@ A System Of Smart Course Selection</footer>

    <login-card ref="loginVue" @onLoginBtnClick="onLoginBtnClick" @onQrCodeLogin="beforeEnter"></login-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import LoginCard from './LoginCard.vue';
import { UserLogin, APIData } from '../../type';
import { useAPI } from '../../request/api';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';

const api = useAPI();
const router = useRouter();
const loginVue = ref();
// const qrCode = ref({ url: '',expireSeconds: 0})

onMounted(() => {
  // buildQrCode();
})

const onOpenLoginDialog = () => {
  loginVue.value.isShowLoginDialog = true;
};

// const buildQrCode = async () => {
//   const res: APIData = await api.getQrCode();
//   if (res.code === 200) {
//     qrCode.value.url = `data:image/png;base64,${res.data.qrCodeBase64}`;
//     qrCode.value.expireSeconds = res.data.expireSeconds;
//   }
//   else ElMessage.error('网络不稳定，请重新生成登陆二维码')
// }

const onLoginBtnClick = async (user: UserLogin) => {
  const res: APIData = await api.login(user);
  if (res.code === 200) {
    beforeEnter(res);
  } else {
    setTimeout(() => {
      // ElMessage.error(res.message);  //在响应拦截器中会提示
      loginVue.value.isClickBtn = false;
    }, 300);
  }
};

const beforeEnter = (res: APIData) => {
  localStorage.setItem('token', res.data);
  localStorage.setItem('role', res.message as string);

  // themeStore.changeThemeColor(); //设置主题色
  router.replace('/layout');
  loginVue.value.isClickBtn = false;
}
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-image: url('@/assets/image/loginBg.jpg');
  background-size: cover;
  display: flex;
  align-items: center;

  article {
    position: absolute;
    left: 7%;
    top: 60px;
    font-size: 38px;
    color: #fff;
    letter-spacing: 3.8px;
    font-weight: 300;
  }

  .wapper {
    width: 86%;
    margin: 0 auto;
    // border: 2px solid red;
    display: flex;
    justify-content: center;

    section {
      width: 47%;
      // border: 2px solid orange;
      margin: auto 0;
      h3 {
        font-size: 58px;
        color: #fff;
        font-weight: normal;
      }
      h4 {
        transition-delay: 0.5s;
        font-size: 34px;
        color: #ffffff;
        margin-top: 15px;
        margin-bottom: 30px;
        font-weight: normal;
        letter-spacing: 2px;
      }
      .loginBtn {
        transition-delay: 1s;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 170px;
        height: 48px;
        padding: 0 20px;
        font-size: 16px;
        color: #304cc9;
        background-color: #fff;
        position: relative;
        transition: all 0.3s ease;
        border: none;
      }
      .loginBtn:hover {
        cursor: pointer;
        transition: all 0.3s ease;
        transform: translateY(-2px);
        box-shadow: 0 4px 20px 12px rgba(0, 0, 0, 0.1);
        // box-shadow: 0 12px 36px 0px #0061ce;
      }
    }

    figure {
      height: 630px;
      width: 53%;
      transform: translateX(6vw);
    }
  }

  footer {
    position: absolute;
    left: 7%;
    bottom: 57px;
    font-size: 14px;
    color: #fff;
    opacity: 0.54;
  }
}
</style>

<!-- <style lang="scss" scoped>
.content {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-image: url('@/assets/image/loginBg.jpg');
  // background-image: url('@/assets/image/bgImg.jpg');
  background-size: cover;

  figure {
    position: absolute;
    left: 70px;
    top: 60px;
    // width: 200px;
    height: 50px;

    .yt_logo {
      width: 40%;
      height: 100%;
      margin-right: 50px;
      transform: scale(1.2);
      border-right: 2px solid #f5f5f5a3;
    }

    .stx_logo {
      width: 40%;
      height: 100%;
      margin-left: 16px;
      transform: scale(1.5);
    }
  }

  article {
    position: absolute;
    left: 195px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 38px;
    letter-spacing: 3.81px;
    font-weight: 300;
    .text-top {
      margin: 5px 0;
      // border: 1px solid red;
    }
    .text-center {
      margin: 5px 0 5px 60px;
      // border: 1px solid skyblue;
    }
    .text-bottom {
      margin: 5px 0 5px 120px;
      // border: 1px solid green;
    }
  }

  main {
    position: absolute;
    right: 7%;
    top: 0;
    width: 340px;
    height: 100%;
    display: flex;
    align-items: center;
  }

  footer {
    position: absolute;
    left: 70px;
    bottom: 57px;
    font-size: 14px;
    color: #fff;
    opacity: 0.54;
  }
}
</style> -->
